<template>
    <div v-loading="loading" element-loading-text="拼命加载中">

        <div class="content_top">
            <el-row>
                <el-col :span="20">
                    <el-form :inline="true" size="mini" label-width="10px;">
                        <el-form-item label="商品分类:">
                            <el-cascader :options="category.data" :props="category.props" v-model="condition.category">
                            </el-cascader>
                        </el-form-item>

                        <el-form-item label="商品名称:">
                            <el-input v-model="condition.name" class="form-item"></el-input>
                        </el-form-item>

                        <el-form-item label="商品编码:">
                            <el-input v-model="condition.goodsNo" class="form-item"></el-input>
                        </el-form-item>

                        <el-form-item label="状态:">
                            <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.status">
                                <el-option label="全部" :value="-1"></el-option>
                                <el-option label="上架" :value="1"></el-option>
                                <el-option label="下架" :value="2"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="排序:">
                            <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.sort">
                                <el-option label="默认" :value="0"></el-option>
                                <el-option label="库存倒叙" :value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-button icon="el-icon-search" type="primary" size="mini" @click="loadList">查 询&nbsp;&nbsp;</el-button>
                    </el-form>
                </el-col>
                <el-col :span="4" style="text-align: right">
                    <el-button icon="el-icon-plus" type="success" circle size="mini" @click="showSave(null)"></el-button>
                </el-col>
            </el-row>
        </div>

        <el-table :data="data.data" border stripe highlight-current-row style="width: 100%" size="mini">
            <el-table-column type="index" header-align="center" align="center" width="50px"/>
            <el-table-column prop="name" label="商品名称" header-align="center" align="center" width="150px;"/>
            <el-table-column prop="inventory" label="库存" header-align="center" align="center" width="50px">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="showDepotSave(scope.row)">{{ scope.row.inventory }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="goodsNo" label="商品编号" header-align="center" align="center" width="80px"/>
            <el-table-column prop="category" label="分类" header-align="center" align="center" width="50px"/>

            <el-table-column prop="costPrice" label="成本" header-align="center" align="center" width="50px"/>
            <el-table-column prop="plusRate" label="加价率" header-align="center" align="center" width="50px"/>
            <el-table-column prop="adviseUnitPrice" label="建议单价" header-align="center" align="center" width="50px"/>

            <el-table-column prop="unitPrice" label="单价" header-align="center" align="center" width="50px"/>
            <el-table-column prop="weight" label="重量" header-align="center" align="center" width="50px"/>
            <el-table-column prop="price" label="售价" header-align="center" align="center" width="50px"/>
            <el-table-column prop="promotion" label="促销" header-align="center" align="center" width="50px">
                <template slot-scope="scope">
                    {{ scope.row.promotion === 0 ? '无' : (scope.row.promotion === 1 ? '特价' : '限购')}}
                </template>
            </el-table-column>
            <el-table-column prop="promotionPrice" label="促销价" header-align="center" align="center" width="50px"/>
            <el-table-column prop="sort" label="排序码" header-align="center" align="center" width="50px;"/>
            <el-table-column prop="cartCount" label="购物车" header-align="center" align="center" width="50px;"/>
            <el-table-column prop="status" label="状态" header-align="center" align="center" width="50px;">
                <template slot-scope="scope">
                    {{ scope.row.status === 1 ? "上架" : "下架" }}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" header-align="center" align="center"/>
            <el-table-column prop="action" fixed="right" label="操作" header-align="center" align="center" width="155px;">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="showDepot(scope.row)">库存</el-button>
                    <el-button type="text" size="mini" @click="showStatus(scope.row.id, scope.row.status)">状态</el-button>
                    <el-button type="text" size="mini" @click="showSave(scope.row.id)">修改</el-button>
                    <el-button type="text" size="mini" @click="remove(scope.row.id)" style="color: red">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="content_bottom" style="text-align: center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="condition.currentPage" :page-size="condition.pageSize" :total="data.total"
                           :page-sizes="[10, 15, 20, 30, 50, 80, 100]" layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>

        <el-dialog title="修改状态" :visible.sync="dialogVisible" width="30%" append-to-body>
            <div>
                <el-form ref="form" :model="form" :rules="rules" label-width="95px" size="mini">
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1">上架</el-radio>
                            <el-radio :label="2">下架</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitStatus">保存</el-button>
            </div>
        </el-dialog>

        <el-dialog title="增加库存" :visible.sync="depotDialogVisible" width="30%" append-to-body>
            <div>
                <el-form ref="depotForm" :model="depotForm" :rules="depotRules" label-width="95px" size="mini">
                    <!--<el-form-item label="库存编码：" prop="depotNo">-->
                    <!--<el-input v-model="form.depotNo" style="width: 305px;"></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item label="单价：" prop="unitPrice">
                        <el-input-number v-model="depotForm.unitPrice" :min="0" :precision="2" style="width: 305px;"></el-input-number>
                        <span class="lable-remark"> 元/500克</span>
                    </el-form-item>
                    <el-form-item label="重量：" prop="weight">
                        <el-input-number v-model="depotForm.weight" :min="0" :precision="2" style="width: 305px;"></el-input-number>
                        <span class="lable-remark">克</span>
                    </el-form-item>
                    <el-form-item label="售价：" prop="price">
                        <el-input-number v-model="depotForm.price" :min="0" :precision="2" style="width: 305px;"></el-input-number>
                    </el-form-item>
                    <el-form-item label="入库数：" prop="count">
                        <el-input-number v-model="depotForm.count" :min="1" style="width: 305px;"></el-input-number>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="depotDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onDepotSubmit">保存</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    import {categoryTree} from '@/api/goods/goods-category'
    import {goodsList, removeGoods, modifyStatus} from '@/api/goods/goods'
    import {addDepot} from '@/api/goods/goods-depot'

    export default {
        name: 'Goods',
        data() {
            return {
                loading: false,
                dialogVisible: false,
                depotDialogVisible: false,
                category: {
                    props: {label: 'name', value: 'id'},
                    data: []
                },
                condition: {
                    currentPage: 1,
                    pageSize: 30,
                    category: null,
                    status: -1,
                    sort: 0,
                    name: "",
                    goodsNo: ""
                },
                data: {},
                form: {
                    status: null
                },
                goods: {},
                depotForm: {
                    depotNo: null,
                    unitPrice: 0,
                    weight: 0,
                    price: 0,
                    count: 1
                },
                rules: {
                    status: [
                        {required: true, message: '请选择状态', trigger: 'blur'},
                    ]
                },
                depotRules: {
                    depotNo: [
                        {required: true, message: '库存编码不能为空', trigger: 'blur'},
                        {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                    ],
                    unitPrice: [
                        {required: true, message: '请输入单价', trigger: 'blur'},
                    ],
                    weight: [
                        {required: true, message: '请输入重量', trigger: 'blur'},
                    ],
                    price: [
                        {required: true, message: '请输入售价', trigger: 'blur'},
                    ],
                    count: [
                        {required: true, message: '请输入入库数', trigger: 'blur'},
                    ]
                }
            }
        },
        computed: {},
        mounted() {
            this.loadCategory()
            this.loadList()
        },
        methods: {
            async loadCategory() {
                let res = await categoryTree()
                if (res.code !== "0") return
                this.category.data = res.data[0].children
            },
            handleSizeChange(val) {
                this.condition.pageSize = val
                this.loadList()
            },
            handleCurrentChange(val) {
                this.condition.currentPage = val
                this.loadList()
            },
            async loadList() {
                this.loading = true
                let params = JSON.parse(JSON.stringify(this.condition))
                if (this.condition.category) {
                    params.category = this.condition.category[0]
                }
                if (params.status === -1) {
                    params.status = null
                }
                let res = await goodsList(params)
                this.loading = false
                if (res.code !== "0") return
                this.data = res
            },
            remove(id) {
                this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.removeIng(id);
                });
            },
            async removeIng(id) {
                this.loading = true;
                let res = await removeGoods(id);
                this.loading = false
                if (res.code !== '0') {
                    this.$message.warning(res.message)
                    return
                }
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.loadList()
            },
            showDepot(row) {
                window.sessionStorage.setItem("goods", JSON.stringify(row));
                this.$router.push({name: 'goods-goods-depot'})
            },
            showDepotSave(row) {
                this.goods = row
                this.depotDialogVisible = true
                this.depotForm.unitPrice = this.goods.unitPrice
                this.depotForm.weight = this.goods.weight
                this.depotForm.price = this.goods.price
            },
            showSave(id) {
                if (id) {
                    window.localStorage.setItem("goodsId", id);
                    this.$router.push({name: 'goods-goods-save'})
                } else {
                    window.localStorage.removeItem("goodsId");
                    this.$router.push({name: 'goods-goods-save'})
                }
            },
            showStatus(id, status) {
                this.form.status = status
                window.localStorage.setItem("goodsId", id);
                this.dialogVisible = true
            },
            onSubmitStatus() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.saveStatus()
                    } else {
                        return false;
                    }
                });
            },
            async saveStatus() {
                this.loading = true;
                let res = await modifyStatus(window.localStorage.getItem("goodsId"), this.form)
                this.loading = false
                if (res.code !== '0') {
                    return this.$notify.error({title: '消息', message: res.message})
                }
                this.dialogVisible = false
                this.$notify({title: '消息', message: '保存成功', type: 'success'});
                this.$refs.form.resetFields();
                this.loadList()
            },
            onDepotSubmit() {
                this.$refs.depotForm.validate((valid) => {
                    if (valid) {
                        this.saveDepot()
                    } else {
                        return false;
                    }
                });
            },
            async saveDepot() {
                this.loading = true;
                let res = await addDepot(this.goods.id, this.depotForm)
                this.loading = false
                if (res.code !== '0') {
                    return this.$notify.error({title: '消息', message: res.message})
                }
                this.depotDialogVisible = false
                this.$notify({title: '消息', message: '保存成功', type: 'success'});
                this.$refs.depotForm.resetFields();
                this.loadList()
            },
        }
    }
</script>

<style scoped>
</style>
